<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>赛博霓虹时钟</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        background: #000;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }

      /* 背景脉冲环 */
      .pulse-ring {
        position: absolute;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        border: 2px solid rgba(0, 255, 255, 0.2);
        animation: pulse 4s infinite ease-out;
      }
      .pulse-ring:nth-child(2) {
        animation-delay: 1s;
        border-color: rgba(255, 0, 255, 0.2);
      }
      .pulse-ring:nth-child(3) {
        animation-delay: 2s;
        border-color: rgba(0, 255, 128, 0.2);
      }
      @keyframes pulse {
        0% {
          transform: scale(0.8);
          opacity: 1;
        }
        100% {
          transform: scale(1.6);
          opacity: 0;
        }
      }

      /* 时钟容器 */
      .clock-wrapper {
        position: relative;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: radial-gradient(circle at 50% 50%, #111 0%, #000 100%);
        box-shadow: 0 0 20px #0ff, inset 0 0 20px rgba(0, 255, 255, 0.2);
      }

      /* 刻度 */
      .tick {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px;
        height: 10px;
        background: #0ff;
        transform-origin: 50% 0;
        transform: translate(-50%, -160px);
      }
      .tick.major {
        width: 3px;
        height: 16px;
        background: #fff;
        box-shadow: 0 0 4px #fff;
      }

      /* 指针 */
      .hand {
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: 50% 100%;
        border-radius: 4px;
        box-shadow: 0 0 6px currentColor;
      }
      .hour {
        width: 8px;
        height: 80px;
        margin-left: -4px;
        margin-top: -80px;
        background: linear-gradient(to top, #0ff, #088);
        color: #0ff;
      }
      .minute {
        width: 6px;
        height: 110px;
        margin-left: -3px;
        margin-top: -110px;
        background: linear-gradient(to top, #f0f, #808);
        color: #f0f;
      }
      .second {
        width: 2px;
        height: 130px;
        margin-left: -1px;
        margin-top: -130px;
        background: linear-gradient(to top, #0f8, #080);
        color: #0f8;
      }

      /* 中心点 */
      .center {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #fff;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 10px #fff;
      }

      /* 数字时间 */
      .digital {
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        color: #0ff;
        font-size: 20px;
        letter-spacing: 2px;
        text-shadow: 0 0 8px #0ff;
      }
    </style>
  </head>
  <body>
    <!-- 脉冲环 -->
    <div class="pulse-ring"></div>
    <div class="pulse-ring"></div>
    <div class="pulse-ring"></div>

    <!-- 时钟主体 -->
    <div class="clock-wrapper">
      <!-- 刻度 -->
      <div id="ticks"></div>

      <!-- 指针 -->
      <div class="hand hour" id="hour"></div>
      <div class="hand minute" id="minute"></div>
      <div class="hand second" id="second"></div>

      <!-- 中心点 -->
      <div class="center"></div>

      <!-- 数字时间 -->
      <div class="digital" id="digital"></div>
    </div>

    <script>
      const $ = (id) => document.getElementById(id);

      // 生成刻度
      const ticks = $("ticks");
      for (let i = 0; i < 60; i++) {
        const t = document.createElement("div");
        t.className = i % 5 === 0 ? "tick major" : "tick";
        t.style.transform = `translate(-50%, -160px) rotate(${i * 6}deg)`;
        ticks.appendChild(t);
      }

      function updateClock() {
        const now = new Date();
        const h = now.getHours() % 12;
        const m = now.getMinutes();
        const s = now.getSeconds();
        const ms = now.getMilliseconds();

        const hrDeg = (h + m / 60) * 30;
        const minDeg = (m + s / 60) * 6;
        const secDeg = (s + ms / 1000) * 6;

        $("hour").style.transform = `rotate(${hrDeg}deg)`;
        $("minute").style.transform = `rotate(${minDeg}deg)`;
        $("second").style.transform = `rotate(${secDeg}deg)`;

        // 数字时间
        $("digital").textContent =
          String(h || 12).padStart(2, "0") +
          ":" +
          String(m).padStart(2, "0") +
          ":" +
          String(s).padStart(2, "0");
      }

      updateClock();
      setInterval(updateClock, 50);
    </script>
  </body>
</html>
